<template>
  <div id="app" style="width: 50%;margin: auto;padding-top: 50px">
    <el-card shadow="always" style="text-align: center">
      <p style="font-size: 20px;font-weight:bold"><i class="el-icon-edit"/> 编辑个人技能</p>
    </el-card>

    <el-card class="box-card" style="margin-top: 20px ">
      <div>
        <div style="float: left">
          <span style="font-size: 20px;font-weight:bold"> 技能 </span>
        </div>
        <div style="float: right;margin-right:180px;font-size: 25px">
          <i class="el-icon-circle-plus-outline" @click="addSkill()"></i>
          <i class="el-icon-remove-outline" @click="delSkill()"></i>
        </div>

        <div v-for="(skill,index) in skillList" :key="index" style="clear:both;margin:20px 0  0 5%">

          <el-input v-model="skill.skillName" placeholder="请输入技能" style="width:200px"></el-input>
          <el-input-number v-model="skill.skillScore" controls-position="right" @change="handleChange"
                           :min="1"
                           :max="100">
          </el-input-number>
          <span style="font-size: 14px;color: #007bff">  技能熟练度（最大100）</span>

          <i class="el-icon-delete-solid" @click="delSkillList(skill.id,index)"></i>
        </div>

      </div>

      <el-button type="primary" style="margin:10px 0 10px 0" @click="submit()">提交</el-button>

    </el-card>

    <div style="height: 250px"></div>

  </div>
</template>

<script>
export default {
  name: "infoSkill",
  data() {
    return {
      skillList: []
    }

  },
  methods: {
    async addSkill() {
      const {data: res} = await this.$http.post('/personalSkill/personalSkill')
      let objSkill = {
        id: res.content.id,
        skillName: '',
        skillScore: 0,
      }
      this.skillList.push(objSkill)
    },
    delSkill() {
      if (this.skillList.length > 0) {
        this.skillList.pop()
      }
    },
    handleChange(value) {
      console.log(value);
    },
    async initSkillList() {
      const {data: res} = await this.$http.get('/personalSkill/personalSkill/' + this.$store.state.userId)
      this.skillList = res.content
    },
    async delSkillList(Id, index) {
      this.skillList.splice(index, 1)
      const {data: res} = await this.$http.delete('/personalSkill/personalSkill/' + Id)
      console.log(res)
    },
    async submit() {
      for (let i = 0; i <this.skillList.length ; i++) {
        if(this.skillList[i].skillName==='') return
      }
      const {data: res} = await this.$http.put('/personalSkill/personalSkill/', this.skillList)
      console.log(res)
      await this.$router.push('/userLoginMain/infoMain')
    }
  },
  mounted() {
    this.initSkillList()
  }
}
</script>

<style scoped>

</style>